<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程榜单</title>
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/ranking.css">
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>
</head>
<body>
    <div class="top wow">
        <img src="/assets/home/images/ranking_back.png" />
    </div>

    <div class="list">
        {foreach $subjectList as $key=>$subject}
        <div class="item wow" data-wow-delay="{$key*20+100}ms">
            <div class="content">
                <a href="/home/course/details?id={$subject.id}">
                    <div class="thumb">
                        <img src="{$subject.thumbs_text}" alt="">
                    </div>
                    <div class="info">
                        <div class="name">
                            <span>课程名称：</span>{$subject.title}
                        </div>
                        <div class="type">
                            <span>课程分类：</span>{$subject.category.name}
                        </div>

                        <div class="teacher">
                            <span>授课老师：</span>{$subject.teacher.name}
                        </div>

                        <div class="price">
                            <span>课程价格：</span>￥{$subject.price}
                        </div>
                    </div>
                </a>
            </div>

            <div class="footer">
                <div class="left">
                    {$subject.orders_num}人购买
                </div>
                <div class="right">
                    <a href="/home/course/details?id={$subject.id}">去购买 ></a>
                </div>
            </div>

            <div class="tip">
                <span>No.{$key+1}</span>
            </div>
        </div>
        {/foreach}
    </div>
</body>
</html>
<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>